<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE>
<html>
  <head>    
    <title>商品添加</title>
    <base href="<%=basePath%>">
	<link rel="stylesheet" type="text/css" href="/css/edittable.css"  ></link>  
	<link rel="stylesheet" type="text/css" href="/css/validate.css"  ></link>  
	<script type="text/javascript"  src="/js/jquery-1.8.0.js"></script>
	  	<script type="text/javascript">
	  		  var result1=false;
	  		  var result2=false;
	  		  var result3=false;
	  		  function setImagePreview(docObj, localImagId, imgObjPreview, width, height) {
				if (docObj.files && docObj.files[0]) { //火狐下，直接设img属性        
					imgObjPreview.style.display = 'block';
					imgObjPreview.style.width = width;
					imgObjPreview.style.height = height;
					//火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式        
					imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
				} else { //IE下，使用滤镜      
					docObj.select();
					var imgSrc = document.selection.createRange().text;
					//必须设置初始大小        
					localImagId.style.width = width;
					localImagId.style.height = height;
					//图片异常的捕捉，防止用户修改后缀来伪造图片        
					try {
						localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
						localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
					} catch (e) {
						alert("您上传的图片格式不正确，请重新选择!");
						return false;
					}
					imgObjPreview.style.display = 'none';
					document.selection.empty();
				}
			}
	 
	  	</script>
	  	
	  	<script>
	  		$(function(){
				if(${good.bigCateId==null}){
					
				}else{
					$(function(){
			     		var c = "${good.bigCateId}";
			     		$("#bigCateId option").each(function(){
			     			if(this.value==c){
			     				this.selected=true;
			     				if(${good.smallCateId!=null}){
			     					$.ajax({
										url:"GoodsServlet.do",
										type:"post",
										async:false,
										dataType:"json",
										data:{bigcateid:this.value,flag:"smallcatelist"},
										success:function(cateList){
											$("#smallCateId").empty();
											$.each(cateList,function(key,cateInfo){
												var optionStr;
												if(${good.smallCateId==cateInfo.id}){
													optionStr = "<option value='"+cateInfo.id+"' selected>"+cateInfo.cateName+"</option>";
												}else{
													optionStr="<option value='"+cateInfo.id+"'>"+cateInfo.cateName+"</option>";
												}
												$("#smallCateId").append(optionStr);
												
											});
				  						}
									})	
			     				}
			     			}
			     		})	
			     	})
				}
	  			
	  			$("#bigCateId").change(function(){
						if(this.value=="-1"){
							$("#smallCateId").html("<option>-所属小分类-</option>");
						}else{
							$.ajax({
								url:"GoodsServlet.do",
								type:"post",
								async:false,
								dataType:"json",
								data:{bigcateid:this.value,flag:"smallcatelist"},
								success:function(cateList){
									$("#smallCateId").empty();
									$.each(cateList,function(key,cateInfo){
										var optionStr="<option value='"+cateInfo.id+"'>"+cateInfo.cateName+"</option>";
										$("#smallCateId").append(optionStr);
									});
		  						}
							})	
						}
	  			})
	  			
	  			
	  			
	  			//商品名称校验
	  			$("#goodsName").blur(function(){
	  				var text = /^.{2,20}$/;
					var a=$("#goodsName").val();
					if(text.test(a)){
						$.ajax({
							url:"GoodsServlet.do",
							type:"post",
							data:{goodsName:this.value,flag:"textgoodsName"},
							success:function(data){
								if(data==1){
									$("#goodsName_msg").html("√");
									$("#goodsName_msg").css("color","green");
									result1=true;
								}else{
									$("#goodsName_msg").html("商品名称已存在");
									$("#goodsName_msg").css("color","red");
									result1=false;
								}
	  						}
						})	
					}else{
						$("#goodsName_msg").html("输入错误，2-20位非空白字符");
						$("#goodsName_msg").css("color","red");
						result1=false;
					}
	  			})
	  			
	  			
	  			//计量单位的校验
	  			$("#unit").blur(function(){
	  				var text = /^.{1,10}$/;
					var a=$("#unit").val();
					if(text.test(a)){
						$("#unit_msg").html("√");
						$("#unit_msg").css("color","green");
						result2=true;
					}else{
						$("#unit_msg").html("输入错误，1-10个非空字符");
						$("#unit_msg").css("color","red");
						result2=false;
					}
	  			})
	  			
	  			$("#price").blur(function(){
	  				var a=$("#price").val();
	  				if(a==""||a==null){
	  					$("#price_msg").html("输入错误，不能为空,以元为单位,可以是小数");
						$("#price_msg").css("color","red");
						result3=false;
	  				}
	  				if(a<0){
	  					$("#price_msg").html("你长点脑子好吧，卖东西还亏钱");
						$("#price_msg").css("color","red");
						result3=false;
	  				}
	  				if(a>0&&a!=""){
	  					$("#price_msg").html("√");
						$("#price_msg").css("color","green");
						result3=true;
	  				}
	  			})
	  			
	  		})
	  	</script>
	  	
  </head>
  
  <body>
     <div class ="div_title">
		 <div class="div_titlename"><span>商品管理 添加商品</span></div>
	 </div>
	 <form action="GoodsServlet.do?flag=addgoods" method="post" enctype="multipart/form-data">
		 <table class="edit_table" >
		 		<tr>
		 			 	<td class="td_info">商品名称:</td>	
		 			 	<td class="td_input"> 
		 			 		<input type="text" class="txtbox" id="goodsName" name="goodsName" value ="${good.goodsName}"/> 
		 			 		<label class="validate_info" id="goodsName_msg">2-20位非空白字符</label>
		 			 	</td>
		 			 
		 		</tr>
		 			<tr>
		 				<td class="td_info">所属分类</td>	
		 				<td>
		 					<select name="bigCateId" id="bigCateId">
		 						<option value="-1">-所属大分类-</option>
		 						<c:forEach var="cate" items="${cateList}">
		 							<option value="${cate.id}">${cate.cateName}</option>
		 						</c:forEach>
		 					</select>
		 					<select id="smallCateId" name="smallCateId">
		 						<option value="-1" >-所属小分类-</option>
		 					</select>
		 					<label  class="validate_info" id="password_msg">请指定商品所属的分类</label>
		 				</td> 
		 		</tr>
		 		<tr>
		 				<td class="td_info">计量单位</td>	
		 				<td><input type="text" class="txtbox" id="unit" name="unit"  value ="${good.unit}"/> 
		 					<label  class="validate_info"  id="unit_msg">1-10个非空字符</label>
		 				</td>			
		 		</tr>
		 		<tr>
		 				<td class="td_info">商品价格</td>	
		 				<td><input type="text" class="txtbox" id="price" name="price"  value ="${good.price}"/> 
		 					<label  class="validate_info"  id="price_msg">不能为空,以元为单位,可以是小数</label>
		 				</td>
		 				
		 		</tr>
		 		
		 		<tr>
		 				<td class="td_info">生产厂商</td>	
		 				<td><input type="text" class="txtbox" id="producter" name="producter" value ="${good.producter}" />
		 				 <label  class="validate_info"  id="producter_msg"></label></td>
		 		</tr>
		 		
		 		<tr >
		 				<td class="td_info">商品图片</td>
		 				<td>
		 				     <div class="file-box">
								<input name="picture" type="file" onchange="setImagePreview(this,localImag,preview,'100px','125px');"> 
				   				<div id="localImag" style="margin-left: 24px" ></div>
				   				<img id="preview" alt="请上传图片"  src="GoodsServlet.do?flag=showPicture&goodsId=${good.id}" width="100px" height="125px"/>
							</div> 
		   					<div id="localImag" style="margin-left: 24px" ></div>
					    	<label  class="validate_info"  id="picture_msg"></label>
		 				</td>
		 		</tr>
		 		
		 		<tr>
		 			<td class="td_info">备注信息:</td>	
		 			<td><textarea rows="4" cols="27" name="des" id="des" class="txtarea"  >${good.des}</textarea> </td>	
		 		</tr>
		 		<tr>
		 			<td class="td_info"> </td>	
		 			<td> 
			 			<input class="form_btn" type="submit"  value="提交" onclick="return submitform()"/> 
			 			<input type="reset"  class="form_btn" value="重置" onclick="resetform()">
			 			<label id="result_msg" class="result_msg">${msg}</label>
		 			</td>	
		 		</tr>
		</table>
     </form>
     <script>
	     function resetform(){
	    	 	$("#goodsName").val("");
	    	 	$("#unit").val("");
	    	 	$("#price").val("");
	    	 	$("#producter").val("");
	    	 	$("#des").val("");
	    	 	$("#bigCateId").val("-1");
	    	 	$("#smallCateId").html("<option>-所属小分类-</option>");
				$("#goodsName_msg").html("2-20位非空白字符");
				$("#goodsName_msg").css("color","#8FA0AC");
				$("#unit_msg").html("1-10个非空字符");
				$("#unit_msg").css("color","#8FA0AC");
				$("#price_msg").html("不能为空,以元为单位,可以是小数");
				$("#price_msg").css("color","#8FA0AC");
				$("#preview").attr('src','/images/一张纯背景色图片.jpg')
			}
	     function submitform(){
	    	 result=result1&&result2&&result3;
	    	 if($("#bigCateId").val()==-1){
	    		 alert("请选择大分类");
	    		 return false;
	    	 }else if($("#smallCateId").val()==-1){
	    		 alert("请选择小分类");
	    		 return false;
	    	 }else if(result){
	    		 var l=confirm("确认添加吗");
	    		 if(l){
	    			 return true;
	    		 }else{
	    			 return false;
	    		 }
	    	 }else{
	    		 alert("请按要求填写");
	    		 return false;
	    	 }
	     }
     </script>
  </body>
</html>
